<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据列表</title>
    <style>
        .box1{
            width: 70px;
            height: 24px;
            background: rgb(106, 160, 223);
            color: #fff;
            text-align: center;
            line-height: 24px;
            font-size: 10px;
            position: absolute;
            left: 200px;
            top: 0;
        }
        .topBox{
            width: 100%;
            position: relative;
        }
        table{
            width: 800px;
            margin-top: 20px;
        }
        table,th,td{
            border: 1px solid #000;
            border-collapse: collapse;
            border-spacing: 0;
            text-align: center;
        }
        td a{
            text-decoration: none;
            color: #fff;
            width: 100px;
            height: 20px;
            display: inline-block;
            background: red;
            text-align: center;
            line-height: 20px;
        }
    </style>
</head>
<body>
    <div class="topBox">
        <input type="text" id="text">
        <div class="box1">执行查询</div>
    </div>
    <table>
        <thead>
            <tr>
                <th>全选<input type="checkbox" id="all">/反选<input type="checkbox" id="NoAll"></th>
                <th>账号</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        var oMsg=document.querySelector("tbody");
        var oTab=document.querySelector("table");

        // 显示
        var str='';
        var sj=JSON.parse(localStorage.getItem("user")||'[]');
        for(var i=0;i<sj.length;i++){
            str+=`
            <tr>
                <td><input type="checkbox"></td>
                <td>${sj[i].uname}</td>
                <td>${sj[i].uemail}</td>
                <td><a href="javascript:void(0)" dataId="${i}">删除</a></td>
            </tr>
            `
        }
        oMsg.innerHTML=str;

        // 全选/反选
        var oCheck=document.querySelectorAll("tbody input");
        var oAll=document.querySelector("#all");
        var oNoAll=document.querySelector("#NoAll");
        oAll.onclick=function(){
            for(var i=0;i<oCheck.length;i++){
                oCheck[i].checked=oAll.checked;
            }
        }
        for(var i=0;i<oCheck.length;i++){
            oCheck[i].onclick=function(){
                var status=Array.from(oCheck).every(item=>{
                    return item.checked==true;
                })
                if(status){
                    oAll.checked=true;
                }else{
                    oAll.checked=false;
                }
            }
        }

        oNoAll.onclick=function(){
            this.checked=false;
            oCheck.forEach(item=>{
                if(item.checked){
                    item.checked=false;
                }else{
                    item.checked=true;
                }
            })
        }

        // 删除
        oTab.addEventListener("click",function(evt){
            var e=evt||window.event();
            var ele=e.target||e.srcElement;
            if(!(ele.nodeName=="A")){
                return;
            }
            var idData=ele.getAttribute("dataId");
            var oUser=JSON.parse(localStorage.getItem("user"||"[]"));
            for(var i=0;i<oUser.length;i++){
                if(i==idData){
                    oUser.splice(i,1);
                }
            }
            console.log(oUser);
            localStorage.setItem("user",JSON.stringify(oUser));
            // 页面效果
            ele.parentNode.parentNode.remove();
        })

        // 查询
        var oBox1=document.querySelector(".box1");
        var oText=document.querySelector("#text");
        oBox1.onclick=function(){
            var oSerach=oText.value;
            var oUser2 = JSON.parse(localStorage.getItem('user') || '[]');
            var newList=oUser2.filter(item=>item.uname.includes(oSerach))
            
            var strHtml = ``;
            newList.forEach(function (item,index) {
                strHtml += `
                <tr>
                    <td><input type="checkbox"></td>   
                    <td>${item.uname}</td> 
                    <td>${item.uemail}</td> 
                    <td><a href="javascript:void(0)" data-id='${index}'>删除</a></td> 
                </tr>
            `
            })
            oMsg.innerHTML=strHtml;
        }
    </script>
</body>
</html>